<template>
  <div>
      <div class="content">
        <div class="main">
            <div class="log">
                <li>
                    <a href="#"></a>
                    <input type="text" v-model="phone" @blur="animate()" placeholder="请输入您的手机号" >
                </li>
                <li>
                    <a href="#"></a>
                    <input type="text" v-model="pwd"  placeholder="请设置您的密码">
                </li>
            </div>
            <div class="button">
          <button @click="register">注册</button>
      </div>
        </div>
      </div>
  </div>
</template>

<script>
import api from "../axios/api.js";
export default {
    data(){
        return{
            phone:'',
            pwd:''
        }
    },
    mounted(){
       
    },
    methods:{
        register(){
        let data = {
        phone: this.phone,
        pwd:this.pwd,
        };
        this.$post(api.register,data).then(res => {
        if (res.code == 200) {
          this.$toast.success(res.msg);
          setTimeout(function(){
              this.$router.push('/')
          }.bind(this),1000)
         
              }else{
          this.$toast.fail(res.msg);
        }
      });
        },
        animate(){
           var re = /^1\d{10}$/;
           let str = this.phone;
           if(re.test(str)){
            //    alert('成功')
           }else {
               this.$toast.fail("手机不合法");
          }
       }

    }

}
</script>

<style lang="less" scoped>
    .content {
        width: 100%;
        height: 667px;
        background: url("../assets/login_02.png") no-repeat;
        background-size: 100%;
        .main {
            margin: 0 auto;
            .log{
                padding-top: 70%;
                margin: 0 auto;
                 >li:nth-child(2){
                    a{
                        width: 16px;
                        height: 22px;
                        margin-left: 18px;
                        background: url("../assets/pwd.png") no-repeat;
                        background-size: 100%;
                    }
                    input{
                        margin-left: 20px;
                    }
                    }
                li {
                    list-style: none;
                    display: flex;
                    align-items: center;
                    width: 70%;
                    height: 30px;
                    margin: 0 auto;
                    background-color: #ececec;
                    border-radius: 10px;
                    padding: 10px 0px;
                    margin-top: 10px;
                    a{
                        display: block;
                        width: 30px;
                        height: 30px;
                        margin-left: 10px;
                        background: url("../assets/user.png") no-repeat;
                        background-size: 100%;
                    }
                    input{
                        border: none;
                        margin-left: 10px;
                        font-size: 13px;
                        background-color: #ececec;
                    }
                }
            }
        }
    }
    .other {
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        span {
            font-size: 13px;
            color: #b3b4b5;
        }
    }
    .button{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    button{
        width: 270px;
        height: 45px;
        background-color: #05aaec;
        margin-top: 20px;
        border: 0;
        border-radius: 35px;
        color: white;
        
    }
}
</style>